<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户组</title>
    <th:block th:include="import :: links"></th:block>
</head>
<body>
<header>
    <th:block th:include="import :: navigation"></th:block>
</header>
<section class="container" style="margin-top: 60px;">
    <div class="row" id="groupPanel">
        <ol class="breadcrumb col-md-12">
            <li><a href="/index.html">首页</a></li>
            <li><a href="/group/index.html">团队</a></li>
            <li class="active">我的团队</li>
        </ol>
        <h2><i class="fa fa-users"></i> 我的团队</h2>
        <hr/>
        <div class="col-md-12">

            <div v-for="group in groups" class="panel panel-default col-md-3 box">
                <div class="panel-body">
                    <div class="btn-group btn-group-sm toolbar">
                        <a type="button" v-on:click="editGroup(group.groupId)" class="btn waves-effect waves-button"><i class="fa fa-lg fa-pencil-square-o"></i></a>
                        <a type="button" v-on:click="delGroup(group.groupId)" class="btn waves-effect waves-button"><i class="fa fa-lg fa-times"></i></a>
                    </div>
                    <div class="box-content" v-on:click="openGroup(group.groupId)">
                        <h3>{{group.groupName}}</h3>
                        <p class="text-muted" v-if="group.groupDesc.length > 40">{{group.groupDesc.substr(0,40)}}...</p>
                        <p class="text-muted" v-else="">{{group.groupDesc}}</p>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="alert small text-right" role="alert">最后更新时间：<span>{{group.updateTs}}</span></div>
                </div>
            </div>

            <div class="panel panel-default col-md-3 box">
                <div class="panel-body" style="height: 170px; border-bottom: 2px dashed #c0c0c0;">
                    <a href="#" data-toggle="modal" onclick="createAction()"><img th:src="@{/images/plus.png}"/></a>
                </div>
            </div>
        </div>
        <div v-if="groups.length == 0" class="alert alert-info col-md-12" role="alert">
            <strong>您好!</strong> 你还没有任何团队
        </div>
        <h2><i class="fa fa-users"></i> 我加入的团队</h2>
        <hr/>
        <div class="col-md-12">
            <div v-for="jg in joinGroups" class="panel panel-default col-md-3 box">
                <div class="panel-body">
                    <div class="box-content" v-on:click="openGroup(jg.groupId)">
                        <h3>{{jg.groupName}}</h3>
                        <p class="text-muted" v-if="jg.groupDesc.length > 40">{{jg.groupDesc.substr(0,40)}}...</p>
                        <p class="text-muted" v-else="">{{jg.groupDesc}}</p>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="alert small text-right" role="alert">最后更新时间：<span>{{jg.updateTs}}</span></div>
                </div>
            </div>
            <div v-if="joinGroups.length == 0" class="alert alert-info col-md-12" role="alert">
                <strong>您好!</strong> 你还没有加入任何团队
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="AllModal" tabindex="-1" aria-labelledby="dictLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">...</h4>
            </div>
            <div class="modal-body row">

            </div>
        </div>
    </div>
</div>
<footer id="footer"></footer>
<th:block th:include="import :: impJS"></th:block>
<script type="text/javascript" th:src="@{/js/group/index.js}"></script>
<script type="text/javascript">
</script>
</body>
</html>